आधुनिक अनुप्रयोगों में के साथ प्रमाणीकरण एक आम बात है। इस ब्लॉग पोस्ट में, हम चर्चा करेंगे कि Google पहचान सेवाओं को आपके किसी भी फ्रंट-एंड एप्लिकेशन में कैसे एकीकृत किया जाए जो सर्वर के रूप में का उपयोग करता है। Google पहचान सेवाएं प्रदान करती हैं Google साइन-इन रूबी ऑन रेल्स अनुकूलित साइन इन / साइन अप बटन एक टैप साइन इन करें चलो गोता लगाएँ !! चरण 1: Google डेवलपर कंसोल में एक एप्लिकेशन बनाएं। Google साइन इन या वन टैप का उपयोग करने के लिए, हमें अपने के साथ-साथ में जोड़ने के लिए एक की आवश्यकता होती है। क्लाइंट सर्वर क्लाइंट_आईडी एक एप्लिकेशन बनाने के लिए, हेड करें गूगल डेवलपर कंसोल चुनें. ऐसा करने से पहले आपको अपना कॉन्फ़िगर करने की आवश्यकता है . क्रेडेंशियल बनाएं > OAuth क्लाइंट आईडी सहमति स्क्रीन क्लाइंट_आईडी बनाते समय, और उस पोर्ट को शामिल करना सुनिश्चित करें जिस पर आपका क्लाइंट विकास के लिए अधिकृत जावास्क्रिप्ट मूल और आपके उत्पादन यूआरएल में चल रहा है। लोकलहोस्ट एक बार हो जाने के बाद, आपके पास फ़ॉर्म का अपना होगा 1234567890-abcdefg.apps.googleusercontent.com क्लाइंट_आईडी एप्लिकेशन सेट करने के बारे में अधिक जानकारी के लिए, आप पढ़ सकते हैं । यहाँ चरण 2: क्लाइंट में लाइब्रेरी की स्थापना क्लाइंट लाइब्रेरी लोड करने के लिए, अगर आप या _app का उपयोग कर रहे हैं, तो अपने में अगर का उपयोग कर रहे हैं। React.js index.html <script src="https://accounts.google.com/gsi/client" async defer></script> _app.jsx Next.js चरण 3: अनुकूलित साइन इन बटन प्रदर्शित करना useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []); को यह दिखाने के लिए जोड़ा गया है कि google को हमारे . में विश्व स्तर पर परिभाषित किया गया है Global google index.html विधि दिए गए फ़ील्ड के आधार पर Google क्लाइंट इंस्टेंस के साथ साइन इन बनाता है। एक आवश्यक फ़ील्ड है जो हमें Google एप्लिकेशन बनाने से मिलता है, जावास्क्रिप्ट फ़ंक्शन है (यहां ) जो वन टैप प्रॉम्प्ट या पॉप-अप विंडो से लौटाए गए आईडी टोकन को संभालता है। google.accounts.id.initialize क्लाइंट_आईडी कॉलबैक साइनइनकॉलबैक डिफ़ॉल्ट रूप से, यदि कोई उपयोगकर्ता स्क्रीन पर कहीं भी क्लिक करता है, तो वन टैप प्रॉम्प्ट पर एक एक्सपोनेंशियल कूल-डाउन लागू होता है। यदि आप चाहते हैं कि संकेत हमेशा दिखाई दे, तो इस मान को पर सेट करें। आप अधिक कॉन्फ़िगरेशन पर एक नज़र डाल सकते हैं गलत यहां। विधि Google के साथ साइन इन करें बटन प्रस्तुत करती है। आप कॉन्फ़िगरेशन के साथ खेल सकते हैं google.accounts.id.renderButton यहां। HTML तत्व है। नीचे दिए गए कोड को अपने वेब पेज HTML में जोड़कर, document.getElementById("signInDiv") return ( <div className="App"> <div id="signInDiv" /> </div> ); आप इस तरह एक अनुकूलित बटन देख पाएंगे चरण 4: वन टैप प्रॉम्प्ट प्रदर्शित करना संकेत दिखाने के लिए, इसे useEffect google.accounts.id.prompt(); चरण 5: कॉलबैक फ़ंक्शन को परिभाषित करना जैसा कि में बताया गया है, साइनइनकॉलबैक, हमारा कॉलबैक फ़ंक्शन है जिसे परिभाषित किया जा सकता है चरण 3 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } }; कहाँ पे, एक सर्वर URL है जिसे हम अगले चरण में बनाएंगे लोकलहोस्ट: 3000/उपयोगकर्ता/गूगल एक बार जब हम साइन इन या वन टैप बटन पर क्लिक करते हैं तो Google की ओर से एक प्रतिक्रिया है। परिणाम में दो क्षेत्र शामिल हैं परिणाम : यह फ़ील्ड बेस 64-एन्कोडेड JSON वेब टोकन (JWT) स्ट्रिंग के रूप में आईडी टोकन है क्रेडेंशियल : यह दिखा रहा है कि क्रेडेंशियल कैसे चुना जाता है। इसके बारे में अधिक . select_by यहां हम परिणाम से क्रेडेंशियल लेते हैं और इसे अपने सर्वर पर एक परम के रूप में पास करते हैं। चरण 6: सर्वर में नियंत्रक और मार्ग जोड़ना हम क्लाइंट से अनुरोध को संभालने के लिए सर्वर में एक रूट बनाएंगे। ऐसा करने से पहले, हमें एक नियंत्रक बनाना होगा जो क्लाइंट से JWT को स्वीकार करेगा। एक फ़ाइल बनाएं, , एक विधि जोड़ें । app/controllers/users/user_controller.rb google routes.rb में मार्ग जोड़ें। config/ उपयोगकर्ता/उपयोगकर्ता#google_oauth एक बार, मार्ग JWT को प्राप्त कर लेता है, पहला और सबसे महत्वपूर्ण कदम यह सत्यापित करना है कि JWT मान्य है या नहीं। इसके लिए हम रत्न का प्रयोग कर सकते हैं , जो जारी किए गए आईडी टोकन को सत्यापित करने के लिए Google का आधिकारिक रत्न है। google_auth इसका उपयोग करके आसानी से किया जा सकता है Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" जहां क्लाइंट से प्राप्त जेडब्ल्यूटी है और एक गूगल एप्लिकेशन क्लाइंट आईडी है। एक्सेस_टोकन ऑड यदि टोकन मान्य है, तो यह इस तरह हैश लौटाएगा या अपवाद फेंक देगा { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "your-email@gmail.com", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" } यदि टोकन मान्य है, तो आप अपने डेटाबेस में जांच सकते हैं कि उपयोगकर्ता मौजूद है या नहीं और तदनुसार एक उपयोगकर्ता बनाएं। एक बार यह हो जाने के बाद, आप अपनी प्रमाणीकरण पद्धति के आधार पर उपयोगकर्ता को साइन इन कर सकते हैं या उन्हें पुनर्निर्देशित कर सकते हैं। # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end : अपने सर्वर पर स्थापित करना सुनिश्चित करें और इस को जोड़ें पुनश्च rack-cors एप्लिकेशन config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end इस तरह की त्रुटियों का सामना करने से बचने के लिए : यदि आपका एप्लिकेशन वेब के लिए Google साइन-इन जावास्क्रिप्ट प्लेटफ़ॉर्म लाइब्रेरी का उपयोग करता है, तो इसे Google पहचान सेवा में माइग्रेट करना सुनिश्चित करें क्योंकि पहले वाला पदावनत होने जा रहा है। पीपीएस संपर्क मुझे उम्मीद है कि यह लेख आपको अपनी परियोजनाओं में वन टैप लॉगिन को एकीकृत करने में मदद करेगा। अधिक विस्तृत जानकारी के लिए आप अधिकारी को देख सकते हैं . डॉक्स भी प्रकाशित यहाँ
